import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Button, InputNumber, Popover } from 'antd';
import FormCondition from '@/components/FormCondition';
import DrawerCondition from '@/components/DrawerCondition';
import aliOssUpload from '@/utils/aliOssUpload';
import moment from 'moment';
const FormItem = Form.Item;
const ProduceForm = (props) => {
    const { dispatch,
        visible = {},
        onClose,
        handleCallback,
        loading,
        tagList,
        subjectList
    } = props;
    const { show = false, detail = {} } = visible;
    const { id } = detail;
    const [form] = Form.useForm();
    const fetchMenuEdit = () => {
        form.validateFields().then(async (values) => {
            const { profile, subjectIds = [], tagIds, recommendedHomeTeacher, recommendedHomeRecruitment } = values
            const img = await aliOssUpload(profile)
            dispatch({
                type: 'answering/fakeSaveTeacher',
                payload: {
                    ...values,
                    profile: img.toString(),
                    subjectIds: subjectIds.toString(),
                    tagIds: tagIds.toString(),
                    id
                },
                callback: () => {
                    onClose()
                    handleCallback()
                }
            })
        });
    };

    const formItems = [
        { label: '老师姓名', name: 'teacherName', },
        { label: '头像', name: 'profile', type: 'upload', maxFile: 1 },
        {
            label: '学科', name: 'subjectIds',
            type: 'multiple',
            fieldNames: {
                label: 'subjectName',
                value: 'id'
            },
            rules: [{ required: false }],
            select: subjectList
        },
        {
            label: '答疑类型',
            name: 'teachingModes',
            type: 'select',
            rules: [{ required: false }],
            select: {
                online: '线上',
                offline: '线下'
            }
        },
        {
            label: '标签', name: 'tagIds', type: 'multiple',
            fieldNames: {
                label: 'tagName',
                value: 'id'
            },
            select: tagList
        },
        { label: '描述', name: 'description', type: 'textArea' },
        {
            label: '绑定员工',
            name: 'adminName',
            type: 'user',
            onChange: (e, { option }) => {
                form.setFieldsValue({
                    adminId: option.id
                })
            },
            fieldNames: {
                label: 'username',
                value: 'username'
            },
        },
        {
            label: '绑定员工',
            name: 'adminId',
            hidden: true,
            type: 'user',
            fieldNames: {
                label: 'username',
                value: 'id'
            },
        },
        {
            label: '状态', name: 'status', type: 'radio', select: {
                0: "禁用",
                1: '启用'
            }
        },
    ];

    const modalProps = {
        title: `${detail.id ? '编辑老师' : '新增老师'}`,
        visible: show,
        onClose,
        footer: (
            <Button type="primary" loading={loading} onClick={fetchMenuEdit}>
                确定
            </Button>
        ),
    };

    return (
        <DrawerCondition {...modalProps}>
            <FormCondition form={form} formItems={formItems} initialValues={detail}></FormCondition>
        </DrawerCondition>
    );
};

export default connect(({ loading, }) => ({
    loading: loading.effects['answering/fakeSaveTeacher'],
}))(ProduceForm);
